<template>
  <div class="EditContainer">
    <van-nav-bar title="编辑资料" left-text="返回" left-arrow @click-left="onClickLeft" />

    <div class="editImg">
      <img :src="$axios.defaults.baseURL + userInfo.head_img" alt="" class="personalImg" v-if="userInfo.head_img" />
      <img v-else src="../../assets/logo.png" alt="" class="personalImg" />
      <van-uploader :after-read="uploadAvatar" />
    </div>

    <NavBar labelText="昵称" :descText="userInfo.nickname" @barClick="isShowNickname = true" />
    <NavBar labelText="密码" descText="******" @barClick="isShowPassword = true" />
    <NavBar labelText="性别" :descText="userInfo.gender == 1 ? '男' : '女'" @barClick="isShowGender = true" />

    <van-dialog v-model="isShowNickname" title="修改昵称" show-cancel-button @confirm="editProfile({ nickname: newNickname })">
      <van-field v-model="newNickname" placeholder="请输入新昵称" />
    </van-dialog>
    <van-dialog v-model="isShowPassword" title="修改昵称" show-cancel-button @confirm="editProfile({ password: newPassword })">
      <van-field v-model="newPassword" placeholder="请输入新密码" />
    </van-dialog>

    <van-action-sheet v-model="isShowGender" :actions="genders" @select="setGender" cancel-text="取消" />
  </div>
</template>

<script>
import NavBar from '@/components/NavBar'
// eslint-disable-next-line no-unused-vars
import { Toast } from 'vant'
export default {
  components: {
    NavBar
  },
  data() {
    return {
      userInfo: '',
      isShowNickname: false,
      isShowPassword: false,
      isShowGender: false,
      newNickname: '',
      newPassword: '',
      genders: [
        {
          name: '男',
          gender: 1
        },
        {
          name: '女',
          gender: 0
        }
      ]
    }
  },
  created() {
    this.loadPage()
  },
  methods: {
    loadPage() {
      this.$axios({
        url: '/user_update/' + localStorage.getItem('userId'),
        method: 'post'
      }).then(res => {
        console.log(res)

        const { message, data } = res.data
        if (message === '修改成功') {
          this.userInfo = data
          this.userNumber = data.gender
        } else {
          this.$toast.fail('未登录')
          // this.$router.push('/login')
        }
      })
    },
    editProfile(newData) {
      this.$axios({
        url: '/user_update/' + localStorage.getItem('userId'),
        method: 'post',
        data: newData
      }).then(res => {
        if (res.data.message === '修改成功') {
          this.loadPage()
        }
      })
    },
    uploadAvatar(fileObj) {
      var formData = new FormData()
      formData.append('file', fileObj.file)

      this.$axios({
        url: '/upload',
        method: 'post',
        data: formData
      }).then(res => {
        const { message, data } = res.data
        if (message === '文件上传成功') {
          this.editProfile({
            head_img: data.url
          })
        }
      })
    },
    setGender(item) {
      const dataObj = {
        gender: item.gender
      }
      this.editProfile(dataObj)
      this.isShowGender = false
    },
    onClickLeft() {
      this.$router.back()
      Toast('返回')
    }
  }
}
</script>

<style lang="less" scoped>
.EditContainer {
  padding: 4.4444vw 4.4444vw;
  .editImg {
    position: relative;
    display: flex;
    height: 40vw;
    align-items: center;
    img {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 19.4444vw;
      height: 19.4444vw;
      border-radius: 50%;
      background-color: #fff;
    }
  }
  .van-uploader {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
  }
}
</style>
